<template>
  <div class="app-container">
    <!-- 自定义标题栏 -->
    <div class="title-bar">
      <div class="title-bar-left">
        <div class="app-logo"></div>
        <div class="app-title">Electron多功能工具</div>
      </div>
      <div class="title-bar-right">
        <button class="window-control minimize" @click="minimize"></button>
        <button class="window-control maximize" @click="maximize"></button>
        <button class="window-control close" @click="close"></button>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="app-content">
      <!-- 侧边导航栏 -->
      <div class="sidebar">
        <nav>
          <router-link to="/" class="nav-item" active-class="active">
            <i class="icon icon-home"></i>
            <span>首页</span>
          </router-link>
          <router-link to="/file" class="nav-item" active-class="active">
            <i class="icon icon-file"></i>
            <span>文件</span>
          </router-link>
          <router-link to="/map" class="nav-item" active-class="active">
            <i class="icon icon-map"></i>
            <span>地图</span>
          </router-link>
          <router-link to="/settings" class="nav-item" active-class="active">
            <i class="icon icon-settings"></i>
            <span>设置</span>
          </router-link>
          <router-link to="/about" class="nav-item" active-class="active">
            <i class="icon icon-about"></i>
            <span>关于</span>
          </router-link>
        </nav>
      </div>

      <!-- 路由视图区域 -->
      <div class="content-area">
        <!-- 页面切换动画 -->
        <transition name="fade" mode="out-in">
          <router-view />
        </transition>
      </div>
    </div>

    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-info">{{ statusInfo }}</div>
      <div class="version-info">v1.0.0</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

// 窗口控制功能
const minimize = () => {
  window.electronAPI?.minimizeWindow?.();
};

const maximize = () => {
  window.electronAPI?.maximizeWindow?.();
};

const close = () => {
  window.electronAPI?.closeWindow?.();
};

// 状态信息
const statusInfo = ref("就绪");

// 挂载时监听电子API消息，如果可用的话
onMounted(() => {
  window.electronAPI?.onMessage?.((message: string) => {
    console.log(`收到来自主进程的消息: ${message}`);
    statusInfo.value = `最后更新: ${message}`;
  });
});

// 移除菜单操作的监听器
onUnmounted(() => {
  window.electronAPI?.removeMenuActionListener?.();
});
</script>

<style lang="scss">
:root {
  // 颜色变量
  --primary-color: #3a7bd5;
  --primary-gradient: linear-gradient(to right, #3a7bd5, #00d2ff);
  --dark-color: #242736;
  --light-color: #f5f6fa;
  --accent-color: #00d2ff;
  --danger-color: #ff416c;
  --success-color: #2ed573;
  --warning-color: #ffa502;
  --gray-color: #8395a7;
  --sidebar-width: 220px;
  --titlebar-height: 38px;
  --statusbar-height: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--dark-color);
  background-color: #f1f2f6;
  line-height: 1.5;
  user-select: none;
  overflow: hidden;
  height: 100vh;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f1f2f6;
}

// 标题栏样式
.title-bar {
  height: var(--titlebar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary-gradient);
  color: white;
  -webkit-app-region: drag; // 允许拖动
  padding: 0 15px;

  &-left {
    display: flex;
    align-items: center;

    .app-logo {
      width: 18px;
      height: 18px;
      background-color: white;
      border-radius: 50%;
      margin-right: 10px;
    }

    .app-title {
      font-size: 14px;
      font-weight: 500;
    }
  }

  &-right {
    display: flex;

    .window-control {
      -webkit-app-region: no-drag; // 按钮不可拖动
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-left: 8px;
      border: none;
      cursor: pointer;
      position: relative;

      &.minimize {
        background-color: var(--warning-color);
      }

      &.maximize {
        background-color: var(--success-color);
      }

      &.close {
        background-color: var(--danger-color);
      }
    }
  }
}

// 主内容区域
.app-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

// 侧边栏
.sidebar {
  width: var(--sidebar-width);
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  z-index: 2;

  nav {
    display: flex;
    flex-direction: column;
    padding: 20px 0;

    .nav-item {
      display: flex;
      align-items: center;
      padding: 12px 24px;
      color: var(--gray-color);
      text-decoration: none;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgba(58, 123, 213, 0.05);
        color: var(--primary-color);
      }

      &.active {
        background-color: rgba(58, 123, 213, 0.1);
        color: var(--primary-color);
        border-left: 3px solid var(--primary-color);
      }

      .icon {
        margin-right: 12px;
        font-size: 18px;
        // 这里使用字体图标的基础样式
      }

      // 为各种图标定义简单的占位符样式
      .icon-home::before {
        content: "🏠";
      }
      .icon-file::before {
        content: "📁";
      }
      .icon-map::before {
        content: "🗺️";
      }
      .icon-settings::before {
        content: "⚙️";
      }
      .icon-about::before {
        content: "ℹ️";
      }
    }
  }
}

// 内容区域
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

// 状态栏
.status-bar {
  height: var(--statusbar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f6fa;
  border-top: 1px solid #dfe4ea;
  padding: 0 15px;
  font-size: 12px;
  color: var(--gray-color);
}

// 页面切换动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<!-- 全局类型声明 -->
<script lang="ts">
interface ElectronAPI {
  onMenuAction?: (callback: (data: any) => void) => void;
  removeMenuActionListener?: () => void;
  fileOperation?: (data: any) => Promise<any>;
  openWindow?: (hash: string) => void;
  platform?: string;
  onMessage?: (callback: (message: string) => void) => void;
  minimizeWindow?: () => void;
  maximizeWindow?: () => void;
  closeWindow?: () => void;
}

declare global {
  interface Window {
    electronAPI?: ElectronAPI;
  }
}

export {};
</script>
